<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS Blockout :: CSS 3D Transformations demo</title>
		<script src="js/oz.js"></script>
		<script src="js/css3.oz.js"></script>
		<script src="js/quaternion.js"></script>
		<script src="js/blockout.js"></script>
		<script src="js/shape-old.js"></script>
		<script src="js/shapes.js"></script>
		<script src="js/score.js"></script>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<h1>CSS Blockout</h1>
		<p>No <code>&lt;canvas&gt;</code> used &ndash; only <span id="divs"></span> <code>&lt;div&gt;</code>s <span id="smiley">:-)</span></p>
		<div id="help">
			<h2>Help</h2>
			
			<div>
				<img src="img/rotateX.png" alt="Rotation around X axis" title="Rotation around X axis" />
				<div class="keys">
					<span>Q</span>
					<span>A</span>
				</div>
				<p>Rotate around X axis</p>
			</div>
			<div>
				<img src="img/rotateY.png" alt="Rotation around Y axis" title="Rotation around Y axis" />
				<div class="keys">
					<span>W</span>
					<span>S</span>
				</div>
				<p>Rotate around Y axis</p>
			</div>
			<div>
				<img src="img/rotateZ.png" alt="Rotation around Z axis" title="Rotation around Z axis" />
				<div class="keys">
					<span>E</span>
					<span>D</span>
				</div>
				<p>Rotate around Z axis</p>
			</div>
		</div>
		<div id="score"></div>
		<div id="game">
			<p>This game is a three-dimensional Tetris variation: your goal is to 
			stack pieces falling into a pit while rotating them in order to completely fill pit levels.</p>
			<p>You will need a fast computer and a browser which can reasonably support <a href="http://caniuse.com/#feat=transforms3d">CSS 3D Transforms</a>.</p>
			<div id="play">
				<h2>Play</h2>
				<a href="#">Simple (flat pieces)</a>
				<a href="#">Advanced (3D pieces)</a>
			</div>
		</div>
		<div id="gameover">
			<h2>Game over</h2>
		</div>
		<footer>&copy; 2012 <a href="http://ondras.zarovi.cz/">Ondřej Žára</a></footer>
		<script>new Game()</script>
	</body>
</html>
